<template>
  <view class="page">
    <view class="content">
      <view class="charge-head">
        <view class="charge-msg">
          <text>充值金额</text>
        </view>
        <view class="charge-show">
          <text>￥</text>
        </view>
        <view class="charge">
          <input
            class="uni-input"
            type="number"
            placeholder-class="placeholder"
            v-model="amount"
            focus
            placeholder="请输入充值金额"
            @input="doAmount"
          />
        </view>
        <view class="charge-cell-list">
          <view class="charge-item">
            <view
              ><text
                data-index="0"
                :class="setIndex == 0 ? 'active' : ''"
                @tap="selectTab"
                >{{ amount_arr[0] }}</text
              ></view
            >
            <view
              ><text
                data-index="1"
                :class="setIndex == 1 ? 'active' : ''"
                @tap="selectTab"
                >{{ amount_arr[1] }}</text
              ></view
            >
            <view
              ><text
                data-index="2"
                :class="setIndex == 2 ? 'active' : ''"
                @tap="selectTab"
                >{{ amount_arr[2] }}</text
              ></view
            >
          </view>
          <view class="charge-item">
            <view
              ><text
                data-index="3"
                :class="setIndex == 3 ? 'active' : ''"
                @tap="selectTab"
                >{{ amount_arr[3] }}</text
              ></view
            >
            <view
              ><text
                data-index="4"
                :class="setIndex == 4 ? 'active' : ''"
                @tap="selectTab"
                >{{ amount_arr[4] }}</text
              ></view
            >
            <view
              ><text
                data-index="5"
                :class="setIndex == 5 ? 'active' : ''"
                @tap="selectTab"
                >{{ amount_arr[5] }}</text
              ></view
            >
          </view>
        </view>
      </view>
      <view class="charge-footer">
        <view class="msg">
          <text>选择支付方式</text>
        </view>
        <view class="charge-channel">
          <view class="chanel-img">
            <view class="check-img">
              <label class="radio" data-index="6" @tap="selectTab">
                <radio value="6" :checked="checked == 6 ? true : false"></radio>
                <image src="../../../static/theme/default/my/weixin.png"></image>
                <text>微信</text>
              </label>
              <label class="radio" data-index="7" @tap="selectTab">
                <radio value="7" :checked="checked == 7 ? true : false"></radio>
                <image src="../../../static/theme/default/my/alipay.png"></image>
                <text>支付宝</text>
              </label>
              <label class="radio" data-index="8" @tap="selectTab">
                <radio value="7" :checked="checked == 8 ? true : false"></radio>
                <image src="../../../static/theme/default/my/lingqian.png"></image>
                <text>银行卡</text>
              </label>
            </view>
          </view>
          <button class="charge" type="button" @click="charge">确认充值</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
const module = uni.requireNativePlugin("SandPayTypeModule");
const dcSDPLib = uni.requireNativePlugin("SDPTLib-SDPLibModule");
import { userCharge } from "../../../request/api.js";
import _get from "../../../common/_get";
import _hook from "../../../common/_hook";
import _data from "../../../common/_data";
export default {
  data() {
    return {
      isBounce: false,
      setIndex: null,
      checked: 6, //charge_type 1 支付宝  2微信 3银行卡
      amount: null,
      amount_arr: [100, 200, 300, 400, 500, 600],
    };
  },
  onShow() {
    console.log(this.amount, "amount");
    _hook.routeSonHook();
  },
  methods: {
    wxPay(tokenId) {
      plus.share.getServices(
        (shareList) => {
          console.log(shareList, "shareList");
          let sweixin = shareList.find((val) => val.id == "weixin");
          if (sweixin) {
            sweixin.launchMiniProgram({
              id: "gh_9f75c1034539", //小程序原始id
              path: "pages/zf/index?token_id=" + tokenId,
              type: 0,
            });
            // sweixin.launchMiniProgram({
            // 	"wx_app_id":"wx0962aacaf4205355",
            // 	"gh_ori_id": "gh_9f75c1034539",
            // 	"path_url":'pages/zf/index?token_id=' + tokenId,
            // 	"miniProgramType":"0"
            // })
          } else {
            uni.showToast({
              icon: "none",
              title: "未安装微信,无法打开对应小程序",
            });
          }
        },
        (e) => {
          uni.showToast({
            icon: "none",
            title: "获取微信服务列表失败:" + JSON.stringify(e),
          });
        }
      );
    },
    startLoading(message) {
      uni.showLoading({
        title: message,
      });
    },
    endLoading() {
      uni.hideLoading();
    },

    selectTab(e) {
      this.isBounce = false;
      let index = e.currentTarget.dataset.index;
      if (index > 5) this.checked = index;
      else {
        this.setIndex = index;
        this.amount = this.amount_arr[index];
      }
      // this.amount = this.amount_arr[index];
      // if(index == 6)return   uni.showToast({
      //     title: '该支付通道暂未开放',
      //     duration: 1000,
      //     icon:"none"
      // });
      // if(index > 5)this.checked = index;
      //     else {
      //     this.setIndex = index;
      //     this.amount = this.amount_arr[index];
      // }
    },
    doAmount(e) {
      this.isBounce = false;
      if (isNaN(e.detail.value)) {
        this.amount = 0;
      } else {
        this.amount = parseFloat(e.detail.value);
      }
    },
    charge() {
      //1支付宝 2微信
      if (this.isBounce) return false;
      console.log(this.amount, "that");
      let code = 3;
      if (this.checked == 6) {
        //charge_type 1 支付宝  2微信 3银行卡
        code = 2;
      } else if (this.checked == 7) {
        code = 1;
      } else {
        code = "3";
      }
      console.log(this.checked, "code", code, "code");
      this.isBounce = true;
      _get.charge(
        {
          amount: this.amount || 0,
          charge_type: code,
        },
        (order) => {
          setTimeout(() => {
            this.isBounce = false;
          }, 1500);
          // 判断是否是ios
          if (uni.getSystemInfoSync().platform == "ios") {
            dcSDPLib.SDPTSinglePayMethod(order, (ret) => {
              console.log(ret, "支付结果");
              this.isBounce = false;
              if (ret.payType == "0") {
                // this.wxPay(ret.tokenId);
              } else {
                this.endLoading();
                if (ret.action == "goHomePage") {
                  uni.navigateTo({
                    url: "/pages/my/index",
                  });
                }
              }
            });
          } else {
            module.cashierPaySingle(order, (ret) => {
              console.log(ret, "支付结果");
              this.isBounce = false;
              if (ret.payType == "0") {
                // this.wxPay(ret.tokenId);
              } else {
                this.endLoading();
                if (ret.action == "goHomePage") {
                  uni.navigateTo({
                    url: "/pages/my/index",
                  });
                }
              }
            });
          }
          // uni.requestPayment({
          // 	provider: 'alipay',
          // 	orderInfo: ret.orderInfo, //微信、支付宝订单数据
          // 	success: (res) => {
          // 		uni.showToast({
          // 			title: '支付成功',
          // 			duration: 1000,
          // 			icon: "none"
          // 		});
          // 	},
          // 	fail: (err) => {
          // 		console.log('fail:' + JSON.stringify(err));
          // 	}
          // });
        },
        (ret) => {
          setTimeout(() => {
            this.isBounce = false;
          }, 1000);
          uni.showToast({
            title: ret.msg,
            duration: 1000,
            icon: "none",
          });
        }
      );
      //微信和支付宝待
      //#ifdef APP-PLUS
      if (this.amount <= 0) {
        uni.showToast({
          title: "请输入金额",
          duration: 1000,
          icon: "none",
        });
      }
      //1支付宝 2微信
      // uni.request({
      //     url:_data.data('http_url') + '/im/pay/userCharge',
      //     data:{amount:this.amount,charge_type:1},
      //     header:{
      //         /** 这里设置为简单跨域，只会请求一次 */
      //         'Content-Type': 'application/x-www-form-urlencoded',
      //     },
      //     method:'POST',
      //     success:function (res) {
      //        console.log(res)
      //     }
      // })
      // _get.charge({amount:this.amount,charge_type:1},function (ret) {
      // 	console.log(ret);
      //     uni.requestPayment({
      //         provider: 'alipay',
      //         orderInfo: ret, //微信、支付宝订单数据
      //         success: function (res) {
      //             console.log('success:' + JSON.stringify(res));
      //         },
      //         fail: function (err) {
      //             console.log('fail:' + JSON.stringify(err));
      //         }
      //     });
      // });
      //#endif
    },
  },
};
</script>

<style>
.radio {
  position: relative;
}

.radio text {
  margin-left: 30px;
}

.content {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 100%;
}

.check-img {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 34px 37px;
}
.check-img .radio {
  align-items: center;
}

.check-img image {
  width: 50upx;
  height: 50upx;
  position: absolute;
  top: 0;
}

.charge-footer .msg {
  height: 100upx;
  line-height: 100upx;
  width: 100%;
  color: #aeaeb0;
  margin-left: 10%;
  font-size: 14px;
}

.charge-footer {
  padding-bottom: 80upx;
}

.charge-footer .charge-channel {
  background-color: white;
  padding-bottom: 180upx;
}

.charge-footer .charge {
  width: 90%;
  background-color: #5693ee;
  color: white;
  height: 80upx;
  line-height: 80upx;
  border-radius: 50upx;
  font-size: 16px;
}

.charge-footer {
  background-color: #eeeef0;
}

.content .charge-head {
  padding: 15upx 60upx;
  background-color: white;
}

.content .charge-show {
  margin-top: 20upx;
}

.content .charge-head .charge input {
  padding-left: 0px !important;
  font-size: 20px;
}

.content .charge-head .charge {
  margin: 10upx 0;
}

.content .charge-msg {
  color: #a8a8a8;
}

.content .charge-head .charge-cell-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.content .charge-head .charge-cell-list .charge-item {
  display: flex;
  flex-direction: row;
}

.charge-cell-list .charge-item view {
  display: flex;
  flex: 1;
  padding: 10upx;
}

.charge-cell-list .charge-item view text {
  border: 1px solid #6f6f6f;
  border-radius: 6px;
  padding: 7upx;
  width: 77px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}

.placeholder {
  font-size: 20px;
}

.charge-item .active {
  background-color: #5693ee;
  color: white;
}
</style>
